<template>
	<!--底部 sku 选择弹窗 -->
	<view class="cu-modal bottom-modal show" v-if="show" @click="handleClose">
		<view class="cu-dialog justify-start" @click.stop="">
			<view class="sku-header flex solid-bottom">
				<view class="sku-header__img-wrap flex-shrink">
					<hui-load-image :mstyle="{width:'192rpx',height:'192rpx'}"
						:src="selectInfo.pic?selectInfo.pic:goodsInfo.pic">
					</hui-load-image>
				</view>
				<view class="sku-header__goods-info flex flex-direction flex-sub justify-end">
					<view class="" v-if="goodsInfo.groupStatus">
						<view v-if="nowBuy" class="sku__goods-price flex align-center text-primary">
							<text class="color text-sm">￥</text>
							<text class="color text-15">{{parseFloat(selectInfo.price/100).toFixed(2)}}</text>
						</view>
						<view v-else class="sku__goods-price flex align-center text-primary">
							<text class="color text-sm">￥</text>
							<text class="color text-15">{{parseFloat(goodsInfo.groupPrice/100).toFixed(2)}}</text>
						</view>
					</view>
					<view class="" v-else>
						<view class="sku__goods-price flex align-center text-primary">
							<text class="color text-sm">￥</text>
							<text class="color text-15">{{parseFloat(selectInfo.price/100).toFixed(2)}}</text>
						</view>
						<!-- <view class="sku__goods-price flex align-center text-999 text-delete">
							<text class="text-sm">￥</text>
							<text class="text-15">{{parseFloat(goodsInfo.originalPrice/100).toFixed(2)}}</text>
						</view> -->
					</view>
					<!-- <view class="sku-header-item" v-if="price">剩余 <text>{{selectInfo.stock}}</text> 件</view> -->
					<!-- <view class="sku-header-item" v-else>选择</view> -->
				</view>
			</view>
			<view class="sku-body flex-sub flex flex-direction">
				<scroll-view scroll-y="true" class="scroll-sku flex-sub">
					<view class="sku-group-container">
						<view v-for="(item1,index) in spec_list" class="sku-row">
							<view class="sku-row__title text-left">{{item1.name}}</view>
							<view class="flex justify-start flex-wrap">
								<view v-for="(item2, index2) in item1.list"
									@click="specificationBtn(item2.name,index,$event,index2)" class="sku-row__item"
									:class="[item2.isShow?'':'noactived',subIndex[index] == index2?'actived':'']">
									<text class="sku-row__item-name">{{item2.name}}</text>
								</view>
							</view>

						</view>
					</view>
					<view class="sku-stepper-container flex align-center justify-between">
						<view class="sku-stepper-title flex-shrink">购买数量</view>
						<view class="stepper-container">
							<uni-number-box :min="1" @change="bindChange" :value="num" :max="buyLimit"></uni-number-box>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="sku-actions flex">
				<template v-if="btnType === '2'">
					<button class="button-sku flex-sub" @click="onClickBtn('add')">加入购物车</button>
					<button class="button-sku flex-sub" @click="onClickBtn('buy')">立即购买</button>
				</template>
				<template v-if="btnType === '1'">
					<button class="button-sku flex-sub" @click="onClickBtn('ok')">确定</button>
				</template>
			</view>
			<view class="sku-close" @tap="handleClose">
				<text class="cuIcon-close"></text>
			</view>
		</view>
	</view>
</template>
<script>
	import uniNumberBox from "./uni-number-box.vue"
	export default {
		name: "wui-specification",
		components: {
			uniNumberBox
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			goodsInfo: Object,
			btnType: {
				type: String,
				default: '1'
			},
			nowBuy: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				spec_list: [], //这里是要被渲染字段
				sku_list: [], // 所有的规格可能情况都在这个数组里
				selectArr: [], //存放被选中的值
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
				price: '', //选中规格的价钱
				selectInfo: {
					difference: '请选择规格'
				}, //存放最后选中的商品
				num: 1,
				skuIsNone: 0,
				buyLimit:1000
			};
		},
		watch: {
			goodsInfo: function(e) {
				this.selectArr = []
				this.shopItemInfo = {}
				this.subIndex = []
				this.spec_list = e.spec_list
				if(e.groupStatus==1){
					this.buyLimit = e.buyLimit
				}
				let goods_sku = []
				// console.log('e' + {})
				// console.log(e)
				if (e.sku_list) {
					e.sku_list.forEach((item) => {
						item.difference = item.sku_name_str.join(',')
						goods_sku.push(item)
					})
					this.sku_list = goods_sku
					// console.log('sku_list' + this.sku_list)
					if (goods_sku.length > 0) {
						this.skuIsNone = 1
					}
					this.initData()
				}

			}
		},
		methods: {
			//转换数据 设置坐标
			initData() {
				var self = this;
				for (var i in self.sku_list) {
					self.shopItemInfo[self.sku_list[i].difference] = self.sku_list[i];
				}
				this.selectInfo = {
					id: this.goodsInfo.id,
					pic: this.goodsInfo.pic,
					stock: this.goodsInfo.stock,
					price: this.goodsInfo.price,
					difference: '请选择规格'
				}
				// console.log(this.selectInfo)
				// if(this.goodsInfo.sku_list.length>0){
				self.checkItem();
				// }else{
				// 	this.price = this.goodsInfo.price
				// 	this.selectInfo.difference = '无规格'
				// }


			},
			specificationBtn: function(item, n, event, index) {
				var self = this;
				if (self.selectArr[n] != item) {
					self.selectArr[n] = item;
					self.subIndex[n] = index;
				} else {
					self.selectArr[n] = "";
					self.subIndex[n] = -1; //去掉选中的颜色
				}
				self.checkItem();
			},
			checkItem: function() {
				var self = this;
				var option = self.spec_list;
				// console.log(option)
				var result = []; //定义数组储存被选中的值
				for (var i in option) {
					result[i] = self.selectArr[i] ? self.selectArr[i] : '';
				}
				// console.log('option' +JSON.stringify(option))
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].list) {
						result[i] = option[i].list[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
						option[i].list[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
				}
				if (this.shopItemInfo[result]) {
					this.price = this.shopItemInfo[result].price || ''
					this.selectInfo = {
						id: this.shopItemInfo[result]._id,
						pic: this.shopItemInfo[result].image,
						stock: this.shopItemInfo[result].stock,
						price: this.shopItemInfo[result].price,
						difference: this.shopItemInfo[result].difference
					}
				}
				// console.log('shopItemInfo'+ JSON.stringify(this.shopItemInfo))
				// console.log('selectArr'+ JSON.stringify(this.selectArr))
				// console.log('subIndex'+this.subIndex)
				// console.log('price'+this.price)
				self.$forceUpdate(); //重绘
			},
			isMay: function(result) {
				// console.log('result1' +result)
				for (var i in result) {
					if (result[i] == '') {
						// console.log('result2' +result)
						return true; //如果数组里有为空的值，那直接返回true
					}
				}
				// console.log('result3' +JSON.stringify(this.shopItemInfo))
				// console.log('result4' +JSON.stringify(this.shopItemInfo[result]))
				return this.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true
			},
			onClickBtn(e) {
				if (this.skuIsNone && this.selectInfo.difference == '请选择规格') {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					})
					return
				}
				if (!this.skuIsNone) this.selectInfo.difference = '无规格'
				let options = {
					type: e,
					id: this.skuIsNone ? this.selectInfo.id : 0,
					pic: this.selectInfo.image ? this.selectInfo.image : this.goodsInfo.pic,
					stock: this.selectInfo.stock,
					price: this.selectInfo.price,
					difference: this.selectInfo.difference,
					num: this.num
				}
				this.$emit('select', options)
			},
			bindChange(e) {
				this.num = e
			},
			handleClose() {
				if (this.skuIsNone && this.selectInfo.difference == '请选择规格') {
					this.$emit('close', {
						difference: '请选择规格'
					});
					return
				}
				if (!this.skuIsNone) this.selectInfo.difference = '无规格'
				let options = {
					id: this.skuIsNone ? this.selectInfo.id : 0,
					pic: this.selectInfo.image ? this.selectInfo.image : this.goodsInfo.pic,
					stock: this.selectInfo.stock,
					price: this.selectInfo.price,
					difference: this.selectInfo.difference,
					num: this.num
				}
				this.$emit('close', options);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sku-header {
		margin-left: 32rpx;
	}

	.sku-header__img-wrap {
		width: 192rpx;
		height: 192rpx;
		margin: 24rpx 0;
		background: #f7f8fa;
		border-radius: 8rpx;
		overflow: hidden;
		// image {
		//   width: 100%;
		//   height: 100%;
		// }
	}

	.sku-header__goods-info {
		min-height: 192rpx;
		padding: 24rpx 72rpx 24rpx 16rpx;
	}

	.sku-body {
		width: 100%;

		.scroll-sku {
			width: 100%;
			min-height: 400rpx;
			max-height: 760rpx;
			padding-bottom: 30rpx;
		}
	}

	.sku-group-container {
		margin-left: 32rpx;
		padding: 24rpx 0 4rpx;

		.sku-row {
			margin: 0 6rpx 24rpx 0;

			.sku-row__title {
				padding-bottom: 24rpx;
			}

			.sku-row__item {
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 80rpx;
				margin: 0 24rpx 24rpx 0;
				overflow: hidden;
				color: #333;
				background: #f5f5f5;
				font-size: 26rpx;
				height: 64rpx;
				border: 1rpx solid #f5f5f5;
				border-radius: 8rpx;

				&.actived {
					border-color: #fe3a3a;
					color: #fe3a3a;
				}

				&.noactived {
					color: #c8c9cc;
					background-color: #f5f5f5;
					border-color: #f5f5f5;
				}

				.sku-row__item-img {
					z-index: 1;
					width: 24px;
					height: 24px;
					margin: 4px 0 4px 4px;
					object-fit: cover;
					border-radius: 2px;
				}

				.sku-row__item-name {
					z-index: 1;
					padding: 0 16rpx;
				}
			}
		}
	}

	.sku-stepper-container {
		margin-left: 32rpx;
		padding: 24rpx 0;
		min-height: 60rpx;
		margin-right: 40rpx;
	}

	.sku-actions {
		padding: 16rpx 32rpx;

		.button-sku {
			height: 80rpx;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 80rpx;
			border: 0 none;
			outline: 0 none;
			border-radius: 0;
			color: #fff;

			&:first-of-type {
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				background: linear-gradient(90deg, #F16347, #EE0979);

			}

			&:last-of-type {
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				background: linear-gradient(90deg, #F3AB1F, #EE7200);
			}
		}
	}

	.sku-close {
		position: absolute;
		z-index: 1;
		color: #969799;
		font-size: 48rpx;
		top: 20rpx;
		right: 20rpx;
	}
</style>
